<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>材料选择</title>
    <!-- 引入其它组件 -->
    <!-- 引入 layui -->
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/app.css">
    <style>
        .layui-table th,
        .layui-table td {
            border-color: green !important;
            /* 同时设置表头和单元格的边框颜色 */
        }

        .layui-table-cell-text {
            display: inline-block;
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 自定义高亮样式 */
        .layui-table tr.active-row {
            background-color: #f0f9eb !important;
        }

        .layui-table tr.active-row td {
            background-color: transparent !important;
        }
    </style>
</head>

<body>
    <div class="layui-card">
        <div class="layui-card-body" style="height: calc(100vh - 120px); display: flex; flex-direction: column;">
            <!-- 固定搜索栏 -->
            <div class="layui-form" style="flex-shrink: 0; padding-bottom: 10px;">
                <div class="layui-row" style="width:720px; display: flex; align-items: center;">
                    <div style="flex:1; margin-right: 10px;">
                        <input type="text" name="search" id="search-input" placeholder="输入材料编号/名称" class="layui-input"
                            lay-verify="search">
                    </div>
                    <div style="width:100px;">
                        <button class="layui-btn layui-btn-sm" id="btn-search">搜索</button>
                    </div>
                </div>
            </div>

            <!-- 可滚动的表格区域 -->
            <div style="flex-grow: 1;">
                <table id="material-selector-table" lay-filter="material-selector-table"></table>
            </div>
        </div>
    </div>

    <script src="/js/config/api.js"></script>
    <script src="/js/http.js"></script>
    <script src="/layui/layui.js"></script>
    <script>
        layui.use(['table', 'jquery', 'form'], function () {
            var table = layui.table;
            var form = layui.form;
            var $ = layui.$;
            // 调试：检查token是否可用
            // console.log('iframe token:', localStorage.getItem('token'));

            var tableData = []; // 集中管理数据

            var isComposing = false;

            var itemCount = 0;

            // 初始化选择表格
            table.render({
                elem: '#material-selector-table',
                id: 'material-selector-table',
                height: 'full-80', // 自动高度减去150px（预留搜索栏空间）
                fixed: true, // 固定表头

                cols: [[
                    // { type: 'checkbox' },
                    { type: 'numbers', title: '序号', width: "48" },
                    { field: 'mat_code', title: '材料编号', width: "100" },
                    { field: 'mat_spec', title: '材料规格', width: "400" },
                    { field: 'mat_unit', title: '单位', width: "48", align: 'center'},
                    { field: 'mat_price', title: '单价', align: 'right', width: "60", templet: '<div class="layui-table-cell-number">{{ d.mat_price.toFixed(2) }}</div>' },
                    { field: 'mat_remark', title: '备注', align: 'left', width: "60" },
                ]],
                data: { design_code: '' }, // 通过AJAX加载
                page: false,
                defaultToolbar: [],
                size: 'sm',
                done: function (res) {

                    // 移除默认的hover背景色（可选）
                    $('.layui-table-body tr').hover(
                        function () { $(this).addClass('layui-bg-cyan'); },
                        function () { $(this).removeClass('layui-bg-cyan'); }
                    );

                    // 双击行事件(也可以使用 table.on('rowDouble(table_id)', function(obj){}) 来绑定)
                    $('.layui-table-body tr').on('dblclick', function () {
                        var index = $(this).data('index');
                        var rowData = table.cache['material-selector-table'][index]; // 正确获取行数据

                        // 阻止事件冒泡
                        var event = window.event || arguments.callee.caller.arguments[0];
                        if (event) event.stopPropagation();

                        // 调用输入框
                        InputCount(rowData);
                    });
                }
            });

            // 数据加载函数（替代done回调）
            function loadData(url) {
                // 使用封装好的http方法而不是$.get
                http.get(url)
                    .then(function (res) {
                        tableData = res.data;
                        filterData();
                    })
                    .catch(function (err) {
                        layer.msg('加载材料数据失败: ' + (err.message || err.msg), { icon: 2 });
                        console.error('API错误:', err);
                    });
            }

            // 筛选函数
            function filterData(keyword = '') {
                var filtered = keyword ?
                    tableData.filter(item => item.mat_spec.includes(keyword) || item.mat_code.includes(keyword)) :
                    tableData;

                table.reload('material-selector-table', {
                    data: filtered, // 关键：只更新数据
                    page: false
                });
            }

            // 输入法状态监听
            layui.$('#search-input')
                .on('compositionstart', function () {
                    isComposing = true;
                })
                .on('compositionend', function () {
                    isComposing = false;
                    filterData($(this).val());
                })
                .on('input', function () {
                    if (!isComposing) filterData($(this).val());
                });

            function InputCount(rowData) {
                layer.open({
                    type: 1,
                    title: "材料规格:" + rowData.mat_spec,
                    content: `
                        <div class="layui-form" style="padding:10px;">
                            <div class="layui-form-item">
                                <!-- 数量输入框和右侧选择框的容器 -->
                                <div style="display: flex; align-items: center;">
                                    <!-- 数量输入框 -->
                                    <div class="layui-input-group" style="flex: 1; margin-right: 20px;">
                                        <div class="layui-input-prefix" style="width:80px;">设计数量</div>
                                        <input type="number" lay-affix="number" id="inputQuantity" min="0.01" step="0.01"  lay-precision="2" class="layui-input">
                                        <div class="layui-input-suffix" style="width:80px; text-align:left;">${rowData.mat_unit || '个'}</div>
                                    </div>
                                    
                                    <!-- 右侧的选择框 
                                    <div class="layui-input-inline" style="margin-left: auto;">
                                        <input type="checkbox" name="ckRemove" title="拆除" lay-skin="switch">
                                        <input type="checkbox" name="ckUtilize" title="利旧" lay-skin="switch">
                                    </div>
                                    -->
                                </div>
                            </div>

                            <!-- 备注文字输入框 -->
                            <div class="layui-form-item" style="margin-left:10px;margin-right:10px;">
                                <textarea class="layui-textarea" placeholder="备注材料说明" style="margin-top: 10px;" id="inputRemark"></textarea>
                            </div>
                        </div>`,
                    btn: ['确认', '取消'],
                    area: ['480px', '300px'],
                    success: function (layero, index) {
                        // 保存layero引用到layer对象上
                        this.layero = layero;

                        // 自动聚焦输入框
                        layero.find('#inputQuantity').focus();

                        // 渲染表单元素
                        // layui.form.render('checkbox');

                        // 回车键提交
                        $('#inputQuantity').on('keypress', function (e) {
                            if (e.keyCode === 13) $('.layui-layer-btn0').click();
                        });
                    },
                    yes: function (index) {
                        // 保存layero引用到layer对象上
                        var layero = this.layero;

                        var quantity = parseFloat($('#inputQuantity').val());
                        var remark = $('#inputRemark').val();

                        // 验证输入
                        if (isNaN(quantity)) {
                            layer.msg('请输入有效数字', { icon: 2 });
                            $('#inputQuantity').focus();
                            return false; // 阻止关闭
                        }

                        // 构造返回数据
                        var resultData = {
                            //...rowData,
                            code: rowData.mat_code,
                            name: rowData.mat_spec,
                            unit: rowData.mat_unit,
                            price: rowData.mat_price,
                            quantity: quantity,
                            remark: remark,
                            money: (rowData.price * quantity).toFixed(2),
                            // 获取复选框状态
                            // is_remove: layero.find('input[name="ckRemove"]').prop('checked') ? 1 : 0,
                            // is_utilize: layero.find('input[name="ckUtilize"]').prop('checked') ? 1 : 0,
                            // totalMechanic: (rowData.mechanic * quantity).toFixed(2), // 计算技工总价
                            // totalGeneral: (rowData.general * quantity).toFixed(2), // 计算普工总价
                        };

                        layer.close(index)

                        // 返回给TAB4页面
                        if (parent && parent.layui) {
                            // 调用TAB4页面的回调函数
                            parent.handleMaterialSelect(resultData); // 调用父页面函数
                            // parent.layui.layer.closeAll(); // 关闭所有弹出层
                        }
                    }
                });
            }

            // 初始加载
            loadData(API_CONFIG.ENDPOINTS.GET_NORM_MATERIAL);
        });

    </script>

</body>

</html>